<template>
    <div>
        <CommonData title="累计用户数" :total="userToday">
            <template v-slot:chart>
                <div id="box_o" style="width:100%;height:100%;"></div>
            </template>
            <template>
                <div class="flex">
                    <span class="x">日同比&nbsp;&nbsp;<b>{{userGrowthLastDay}}</b><i class="triangle"></i></span>
                    <span class="x">月同比&nbsp;&nbsp;<b>{{userGrowthLastMonth}}</b><i class="triangle_l"></i></span>
                </div>
            </template>
        </CommonData>
    </div>
</template>

<script>
import topMixin from '@/mixin/topView'
import reportData from '@/mixin/reportData';
export default {
    mixins: [topMixin,reportData],
    mounted() {
        var chartDom = this.$echarts.init(document.getElementById('box_o'));
        var options = {
            xAxis: {
                show: false
            },
            yAxis: {
                type: 'category',
                show: false
            },
            grid: {
                left: 0,
                top: 20,
                bottom: 0,
                right: 0,
                height:10
            },
            series: [
                {
                    data: [100],
                    type: 'bar',
                    stack:'total',
                    barWidth:'30px'
                },
                {
                    data: [200],
                    type: 'bar',
                    stack:'total',
                    barWidth:'30px'
                },
                {
                        type: "custom",
                        data: [100],
                        stack: "总量",
                        renderItem: (params, api) => {
                            let x = api.value(0);

                            let endpoint = api.coord([x, 0]);
                            return {
                                type: "group",
                                position: endpoint,
                                children: [
                                    {
                                        type: "path",
                                        shape: {
                                            d: "M723.25455957 590.56708997c18.04012654 18.87399937 5.28797393 51.17131722-20.21633121 51.17131724l-382.48322394 0c-25.50430513 0-38.25645774-32.29731787-20.21633121-51.17131724l81.27209205-85.01435051 109.9695199-115.05411031c11.16576039-11.67421947 29.26690202-11.67421947 40.43266242 0l109.96951995 115.05411031 81.27209204 85.01435051z",
                                            x: -3,
                                            y: 6,
                                            width: 5,
                                            height: 5,
                                            layout: "cover"
                                        },
                                        style: {
                                            fill: "green"
                                        }
                                    },
                                    {
                                        type: "path",
                                        shape: {
                                            d: "M300.74544043 433.43291003c-18.04012654-18.87399937-5.28797393-51.17131722 20.21633121-51.17131724l382.48322394 0c25.50430513 0 38.25645774 32.29731787 20.21633121 51.17131724l-81.27209205 85.01435051-109.9695199 115.05411031c-11.16576039 11.67421947-29.26690202 11.67421947-40.43266242 0l-109.96951995-115.05411031-81.27209204-85.01435051z",
                                            x: -3,
                                            y: -11,
                                            width: 5,
                                            height: 5,
                                            layout: "cover"
                                        },
                                        style: {
                                            fill: "green"
                                        }
                                    }
                                ]
                            };
                        }
                    }
            ]
        }
        chartDom.setOption(options);
    }
}
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;

    .x {
        display: flex;
        align-items: center;

        .triangle {
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-bottom-color: red;
        }

        .triangle_l {
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-top-color: green;
        }
    }
}
</style>